<style scoped>
.com-wapper{
  width:100%;
  line-height:36px;
  position: relative;
}

.com-box{
  width:100%;
  line-height:36px;
  display: flex;
}

.disable{
  opacity: 0.3;
}

.active-box{
  width:15px;
  height:15px;
  line-height:15px;
  text-align:center;
  border:1px solid #FFF;
  color:#FFF;
  cursor: pointer;
  margin-top:10px;
}

.label{
  font-size:12px;
  color:#FFF;
  margin-left:7px;
}

.able-mask{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}

.r-box{
  width:300px;
  margin-left:auto;
}

.ctrl-box{
  height:24px;
  margin-bottom:10px;
  display: flex;
  align-items: center;
}

.ctrl-box .btn{
  width:24px;
  height:24px;
  line-height: 18px;
  text-align: center;
  color:#FFF;
  font-size:20px;
  display: block;
  box-sizing: border-box;
  border-radius: 12px;
  border:2px solid #FFF;
  margin-right:15px;
  text-decoration: none;
}

.color-box{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.color{
  width:24px;
  height:24px;
  border-radius: 12px;
  background-color: #b55a5a;
  margin-bottom:15px;
  margin-right:15px;
  cursor: pointer;
}

.pk{
  position: fixed;
  left:0px;
  top:0px;
  z-index: 99999;
}
</style>
<template>
<div class="com-wapper">
  <div class="com-box" :class="{'disable':!enable}">
    <div class="active-box" @click="ableHandle">{{enable?'√':''}}</div>
    <div class="label">
      {{label}}
    </div>
    <div class="r-box">
      <div class="ctrl-box">
        <a href="javascript:;" class="btn" @click="btnHandle(true)">+</a>
        <a href="javascript:;" class="btn" @click="btnHandle(false)" v-if="colors.length>1">-</a>
      </div>
      <div class="color-box">
        <div
          class="color"
          v-for="(color,index) of colors"
          :key="index"
          :style="{'background-color':color}"
          :ref="'c'+index"
          @click="colorClickHandle(index)"
        >
        </div>
      </div>
      <color-picker
        head="颜色选择器"
        acceptLabel="确定"
        cancelLabel="取消"
        currentLabel="当前"
        newLabel="最新"
        :value="tmpColor"
        @input="inputHandle"
        @ok="okHandle"
        @cancel="colorPickerShow=false"
        v-show="colorPickerShow"
        class="pk"
        :style="{'top':tmpTop+'px','left':tmpLeft+'px'}"
      />
    </div>
  </div>
  <div class="able-mask" @click="ableHandle" v-if="!enable"></div>
</div>
</template>
<script>
import { Photoshop } from 'vue-color'
export default {
  props: {
    label: {
      type: String,
      default: '颜色'
    },
    value: {
      type: Array
    }
  },

  computed: {
    enable () {
      return !(typeof this.value === 'undefined' || this.value === null)
    }
  },
  components: {
    'color-picker': Photoshop
  },
  data () {
    return {
      colorPickerShow: false,
      colors: [],
      dataCache: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
      tmpColor: '#FFFFFF',
      tmpTop: 0,
      tmpLeft: 0,
      selIndex: 0
    }
  },
  methods: {
    colorClickHandle (index) {
      this.selIndex = index
      this.tmpColor = this.colors[index]
      let dom = this.$refs['c' + index][0]

      this.tmpTop = this.getPos(dom).top + 24
      this.tmpLeft = this.getPos(dom).left
      this.colorPickerShow = true
    },
    inputHandle (e) {
      this.tmpColor = e.hex
    },
    okHandle () {
      // this.colors[this.selIndex] = this.tmpColor
      this.$set(this.colors, this.selIndex, this.tmpColor)
      this.colorPickerShow = false
      this.$emit('input', this.colors)
    },
    btnHandle (bol) {
      if (bol) {
        this.colors.push('#FFFFFF')
      } else {
        this.colors.pop()
      }
      this.$emit('input', this.colors)
    },
    getPos (dom) {
      let pos = { top: 0, left: 0 }

      while (dom) {
        pos.left += dom.offsetLeft
        pos.top += dom.offsetTop

        dom = dom.offsetParent
      }

      return pos
    },
    // ableHandle
    ableHandle () {
      if (this.enable) {
        this.dataCache = this.colors
        this.$emit('input', null)
      } else {
        this.$emit('input', this.dataCache)
      }
    }
  },
  watch: {
    value () {
      if ((typeof this.value !== 'undefined') && (this.value !== null)) {
        this.colors = this.value
      }
    }
  }
}
</script>
